<template>
    <div>
        <div class="wai_1">
            <img :src="img19"class="shang">
            <input type="text" placeholder="德克士 29.9元魔兽套餐">
            <ul>
                <li v-for="todo in todos">{{todo.text}}</li>
             
            </ul>
            <img :src="img20"class="xia">
        </div>
        <div class="wai_2">
            <ul class="shang">
                <li v-for="tod in lis">
                   <img :src="tod.img"> 
                   <span>{{tod.tet}}</span>
                </li>
             
            </ul>
            <ul class="xia">
                 <li v-for="tod in lis">
                   <img :src="tod.img"> 
                   <span>{{tod.tet}}</span>
                </li>
          
            </ul>
            <img :src="img6" class="xai"/>
        </div>
        <div class="wai_3">
            <img :src="img9">
            <p>{{qwe}}</p>
        </div>
        <div class="wai_4">
            <ul class="shang">
                <li v-for="to in liss">
                    <h4>{{to.text}}</h4>
                    <p>{{to.li}}</p>
                    <span>{{to.lia}}</span>
                    <img :src="to.img">
                </li>
            </ul>
            <ul class="xia">
                <li v-for="aa in qq">
                    <h4>{{aa.qa}}</h4>
                    <p>{{aa.qw}}</p>
                    <img :src="aa.img">
                </li>
            </ul>
        </div>
        <div class="wai_5">
            <div class="qq"> 
                <h4>{{q1}}</h4>
                <p class="p2"></p>
                <p class="p3"></p>
            </div>
            <div class="pp">
                <ul>
                    <li v-for="a in q">
                        <img :src="a.img">
                        <p>{{a.qa}}</p>
                        <span>{{a.qw}}</span>
                    </li>
                </ul>
            </div>
        </div>
        <div class="wai_6">
            <div class="qq"> 
                <h4>{{q2}}</h4>
                <p class="p2"></p>
                <p class="p3"></p>
            </div>
            <div class="oo">
                <ul>
                    <li v-for="b in a">{{b.q}}</li> 
                </ul>
            </div>
        </div>
        <div class="wai_7">
            <div class="left">
                <img :src="img17">
            </div>
            <div class="zhou">
                <h4>{{b1}}</h4>
                <p class="p1"><img :src="img18">{{b2}}</p>
                <p class="p2">{{b3}}<span>{{b4}}</span></p>
                <p class="p3">{{b5}}</p>
                <p class="p4"><span>{{b6}}</span>{{b7}}</p>
                <p class="p5"><span>{{b8}}</span>{{b9}}</p>
            </div>
        </div>
    </div>
</template>
<script>
import img1 from '../img/03.png'
import img2 from '../img/04.png'
import img3 from '../img/05.png'
import img4 from '../img/06.png'
import img5 from '../img/07.png'
import img7 from '../img/10.png'
import img8 from '../img/11.png'
import img9 from '../img/12.png'
import img10 from '../img/13.png'
import img11 from '../img/14.png'
import img12 from '../img/b15.png'
import img13 from '../img/b16.png'
import img14 from '../img/b17.png'
import img15 from '../img/b18.png'





export default {
    data () {
        return {
            todos: [
                { text: '冷面'},
                { text: '凉皮'},
                { text: '凉面'},
                { text: '德克士减25'},
                { text: '炒饭'},
                { text: '手擀面'},
                { text: '港岛记'}
            ],
            lis:[
                {tet:'美食',img:img1},
                {tet:'下午茶',img:img2},
                {tet:'超市便利',img:img3},
                {tet:'新鲜果蔬',img:img4},
                {tet:'新店特惠',img:img5},
            ],
            img6:require('../img/08.png'),
            img9:require('../img/09.png'),
            img17:require('../img/b19.png'),
            img18:require('../img/b20.png'),
            img19:require('../img/01.png'),
            img20:require('../img/02.png'),
            liss:[
                {text:'限量抢购',li:'下午茶9.9元起',lia:'298人正在抢',img:img7},
                {text:'限量抢购',li:'下午茶9.9元起',lia:'298人正在抢',img:img8}
            ],
            qq:[
                {qa:'品质联盟',qw:'品质升级 消费亲民',img:img9},
                {qa:'品质联盟',qw:'品质升级 消费亲民',img:img10},
                {qa:'品质联盟',qw:'品质升级 消费亲民',img:img11}

            ],
            qwe:"饿了么向消费者郑重承诺",
            q1:'品质优选',
            q:[
                {qa:'田老师红烧肉',qw:'大牌精选',img:img12},
                {qa:'田老师红烧肉',qw:'大牌精选',img:img13},
                {qa:'田老师红烧肉',qw:'大牌精选',img:img14},
                {qa:'田老师红烧肉',qw:'大牌精选',img:img15}

            ],
            q2:'推荐商家',
            a:[
                {q:'综合排序'},
                {q:'好评优选'},
                {q:'距离最近'},
                {q:'筛选'},
            ],
            b1:'周黑鸭(北京昌平西关环岛店)',
            b2:'5.0 月售310',
            b3:'起送￥20 | 配送￥6',
            b4:'26分钟 | 2.3km',
            b5:'鸭脖卤味',
            b6:'折扣',
            b7:'折扣商品8折起',
            b8:'会员',
            b9:'超级会员领8元无门槛红包',
        }
    },
   
}
  
</script>
<style>
    .wai_1{
        width: 100%;
        height: 262px;
        background-color:#008cff;
    }
    .wai_1 .shang{
        width: 100%;
        height: 73px;
    }
    .wai_1 input{
        width: 80%;
        height: 36px;
        margin-top:10px;
    }
    .wai_1 ul{
        display: flex;
        padding:0;
        
    }
    .wai_1 ul li{
        text-align: center;
        flex:1;
        font-size: 10px;
        color:#fff;
        padding-top:10px;
    }
    .wai_1 .xia{
        width: 100%;
        height: 106px; 
        padding-top:10px;   
    }
    .wai_2 .shang{
        display: flex;
        padding:0;
        margin-top:14px;
    }
    .wai_2 .shang li{
        text-align: center;
        flex:1;
    }
    .wai_2 .shang li img{
        width: 76%;
        height: 76%;
    }
    .wai_2 .xia{
        display: flex;
        padding:0;
        margin-top:14px;
    }
    .wai_2 .xia li{
        text-align: center;
        flex:1;
    }
    .wai_2 .xia li img{
        width: 76%;
        height: 76%;
    }
    .wai_2 .xai{
        width: 95%;
        height: 20%;
        padding-top:30px;
    }
    .wai_3{
        width: 95%;
        height: 41px;
        background: #fafafa;
        margin-left:11px;
        margin-top:20px;
        display: flex;
    }
    .wai_3 img{
        width: 6%;
        height: 70%;  
        padding-top:6px;
        padding-left:10px;  
    }
    .wai_3 p{
        padding-top:12px;
        font-size: 18px;
        padding-left:10px;
    }
    .wai_4 .shang{
        display: flex;
        padding:0;
        margin-top:20px;
    }
    .wai_4 .shang li{
        text-align: center;
        flex:1;
        width: 42%;
        height: 150px;
        background: #fafafa;
    }
    .wai_4 .shang h4{
        color:red;
        font-size: 20px;
        padding-top:10px;
    }
    .wai_4 .shang p{
        font-size: 18px;
    }
    .wai_4 .shang img{
        width: 63%;
        height: 56%;
    }
    .wai_4 .xia{
        display: flex;
        padding:0;
        margin-top:20px;
    }
    .wai_4 .xia li{
        text-align: center;
        flex:1;
        width: 30%;
        background: #fafafa;
    }
    .wai_4 .xia h4{
        font-size: 20px;
        padding-top:10px;
    }
    .wai_4 .xia img{
        width: 57%;
        height: 48%;
    }
    .wai_5 .qq{
        margin:0 auto;
        position: relative;
    }
    .wai_5 .qq h4{
        font-weight: bold;
        padding-top: 10px;
        font-size: 20px;
    }
    .wai_5 .p2{
        position: absolute;
        width: 5%;
        height: 3%;
        background: #000;
        left:30%;
        top:58%;
    }
    .wai_5 .p3{
        position: absolute;
        width: 5%;
        height: 3%;
        background: #000;
        left:64%;
        top:58%;
    }
    .wai_5 .pp{
        margin-top:20px;
    }
    .wai_5 .pp img{
        width: 74%;
        height: 66%;
    }
    .wai_5 .pp ul{
        display: flex;
        padding:0;
    }
    .wai_5 .pp ul li{
        text-align: center;
        flex:1;
    }
    .wai_5 .pp ul li p{
        font-size: 16px;
        padding-top:10px;
    }
    .wai_5 .pp ul li span{
        border:1px solid #7ad2fd;
        color:#7ad2fd;
    }
    .wai_6{
        margin-top:20px;
        height: 80px;
        border-bottom: 2px solid #eeeeee;
    }
    .wai_6 .qq{
        margin:0 auto;
        position: relative;
    }
    .wai_6 .qq h4{
        font-weight: bold;
        padding-top: 10px;
        font-size: 20px;
    }
    .wai_6 .qq .p2{
        position: absolute;
        width: 5%;
        height: 3%;
        background: #000;
        left:30%;
        top:58%;
    }
    .wai_6 .qq .p3{
        position: absolute;
        width: 5%;
        height: 3%;
        background: #000;
        left:64%;
        top:58%;
    }
    .wai_6 .oo ul{
        display: flex;
        padding:0;
    }
    .wai_6 .oo ul li{
        text-align: center;
        flex: 1;
        font-size: 18px;
        padding-top:20px;
    }
    .wai_7{
        display: flex;
        margin-top:20px;
    }
    .wai_7 .left{
        width: 26%;
    }
    .wai_7 .left img{
        width: 79%;
        height: 75%;
    }
    .zhou{
        position: relative;
    }
    .zhou h4{
        font-size:18px;
        font-weight: 600;
    }
    .zhou .p1{
        padding-top:6px;
        font-size: 12px;
        width: 52%;
    }
    .zhou .p1 img{
        width: 40%;
        height: 10%;
    }
    .zhou .p2{
        padding-top:6px;
        font-size: 12px;
        width: 48%;
        
    }
    .zhou .p2 span{
        float:right;
        position: absolute;
        right:0;


    }
    .zhou .p3{
        padding-top:6px;
        border:1px solid #ededed;
        width: 30%;
        font-size: 14px;
    }
    .zhou .p4{
        padding-top:6px;
        width: 55%;
        font-size: 14px;
    }
    .zhou .p4 span{
        border:2px solid #f9e6e4;
        background: #fff3f2;
        color:#ce7b77;
    }
    .zhou .p5{
        padding-top:6px;
        width: 86%;
        font-size: 14px;
    }
    .zhou .p5 span{
        border:2px solid #f2ead6;
        background: #fffef8;
        color:#b66d30;
    }
</style>